<template>
    <nav-bar class="detail-nav">
        <template v-slot:left>
            <div class="back" @click="backClick">
                <img src="~assets/img/common/back.svg" alt="">
            </div>
        </template>
        <template v-slot:center >
            <div class="nav-center-content">
                <div class="title" 
                v-for="(item,index) in titles" :key="index"
                @click="tabClick(index)"
                :class="{active:currentIndex === index}"
                >{{item}}
                </div>
            </div>
        </template>
    </nav-bar>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'

export default {
    name:'DetailNavBar',
    components:{
        NavBar,
        
    },
    data(){
        return{
           currentIndex: 0 ,
           titles:['商品','参数','评论','推荐']
        }
    },
    methods: {
        backClick(){
            this.$router.back()
        },
        tabClick(index){
            this.currentIndex = index;
            this.$emit('tabClick',index)
        }
    }
}
</script>

<style scoped>
    .detail-nav{
        position: relative;
        z-index: 3;
        background-color: #fff;
    }
    .nav-center-content{
        display: flex;
    }
    .title{
       font-size:14px;
       flex:1
    }
    .back img{
        /* margin-top:10px; */
        vertical-align: middle;
    }
    .active{
        color: var(--color-high-text)
    }
</style>